<template>
  <div class="server">
      <div class="customerService" style="padding:200px">
<!--     <div style="text-align: center">
      <h1>客服设置</h1>
    </div> -->
    <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="100">
        <FormItem label="二维码" prop="wechat_url">
            <template>
               <upload-img  
                @handleSuccess="(value)=>{return handleSuccess(value)}"  
                :formStyle="formStyle" 
                :imgUrl.sync = "formInline.wechat_url" 
               >          
               </upload-img>
            </template>
        </FormItem>
        <FormItem label="微信号" prop="wechat_number">
            <Input type="text" :disabled="!is_edit"  v-model="formInline.wechat_number" placeholder="微信号">
                
            </Input>
        </FormItem>
        <FormItem label="手机号" prop="phone">
            <Input type="text" :disabled="!is_edit"  v-model="formInline.phone" placeholder="手机号">
               
            </Input>
        </FormItem>
        <FormItem style="text-align: center">
            <Button :type="is_edit?'primary':'warning'" @click="handleSubmit('formInline')">{{is_edit?"完成":"编辑"}}</Button>
        </FormItem>
    </Form>
  </div>
  </div>
</template>
<script>
import uploadImg from '@/components/uploadImg'
export default {
   data() {
    return {
      is_edit:false,
      formStyle:'',
      formInline: {
          wechat_url:'',
          wechat_number:'',
          phone:''
      },
      ruleInline: {
          wechat_url: [
              { required: true, message: '请上传二维码', trigger: 'blur' },
          ],
          wechat_number: [
              { required: true, message: '请输入微信号', trigger: 'blur' },
          ],
          phone: [
              { required: true, message: '请输入手机号', trigger: 'blur' },
              { type: 'string',  message: '必须是数字', trigger: 'blur' }
          ]
      }
    }
  },
  mounted() {
    this.getDatas();
  },
  methods: {
    handleSuccess(value) {
      console.log(value)
      this.formInline.wechat_url =  value  // 上传图片的路径名
    },
    getDatas(){
      let params = {
         opt: 1
      }
      this.$api.getseverdetail(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.formInline.wechat_url = res.data.wechat_url
              this.formInline.wechat_number = res.data.wechat_number
              this.formInline.phone = res.data.phone
          }
      })
    },
    handleSubmit(value){
      if(this.is_edit){
        let params = {
          wechat_url:this.formInline.wechat_url,
          wechat_number:this.formInline.wechat_number,
          phone:this.formInline.phone,
        };
        this.$api.editsever(params)
          .then(res => {
            console.log(res);
            if (res.code == 200) {
              this.is_edit = false
              this.$Message.success('设置成功');
              this.getDatas();
            }
        })    
      }else{
        this.is_edit  = true
      }
    },
  },
  components: {
    uploadImg
  }
}
</script>
<style lang="less" scoped>
    @import './index.less';
</style>
